<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="renderer" content="webkit|ie-comp|ie-stand">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
		<meta http-equiv="Cache-Control" content="no-siteapp" />
		<title>基础信息</title>
		<meta name="keywords" content="Camera Show,视频集成，视频集成系统">
		<meta name="description" content="该页面为视频集成系统">
		<link rel="Bookmark" href="/favicon.ico">
		<link rel="Shortcut Icon" href="/favicon.ico" />


<!--[if lt IE 9]>
<script type="text/javascript" src="../../lib/html5shiv.js"></script>
<script type="text/javascript" src="../../lib/respond.min.js"></script>
<![endif]-->



<!--[if IE 6]>
<script type="text/javascript" src="../../lib/DD_belatedPNG_0.0.8a-min.js" ></script>
<script>DD_belatedPNG.fix(\'*\');</script>
<![endif]-->

		<link rel="stylesheet" href="../../lib/zTree/v3/css/zTreeStyle/zTreeStyle.css" type="text/css">
		<link rel="stylesheet" href="../../static/h-ui.admin/css/style.css" type="text/css">
		
		<style type="text/css">
        iframe {
            margin: 10px;
            padding: 0;
            border: 0;
            width: 600px;
            height: 400px;
        }
        .iframe_9 {
        	margin: 10px;
            padding: 0;
            border: 0;
            width: 300px;
            height: 200px;
        }
        .iframe_2 {
        	margin: 10px;
            padding: 0;
            border: 0;
            width: 600px;
            height: 400px;
        }
        .div-inline{
        	display: inline;
        }
        .div_1{
        	width: 900px;
            height: 600px;
            background:black; 
            margin-top: 0px;
            margin-left: 120px;
            padding: 0;
            border: 0;
        }
        .div_2{
        	margin-top: 100px;
        	margin-left: 14px;
            padding: 0;
            border: 0;
            float:right;
        	background:black; 
        	height:360px;
        	width:540px;
        }
        .div_4{
        	margin-top: 5px;
        	margin-bottom: 5px;
        	margin-left: 14px;
        	margin-right: 50px;
            padding: 0;
            border: 0;
            float:right;
        	background:black; 
        	height:300px;
        	width:450px;
        }
        .div_9{
        	margin-top: 5px;
        	margin-bottom: 5px;
        	margin-left: 14px;
        	margin-right: 50px;
            padding: 0;
            border: 0;
            float:right;
        	background:black; 
        	height:200px;
        	width:300px;
        }
    </style>
	</head>

	<body>
		
		<div style="float:left;">
		
			<div class="pos-a"
				 style="width:200px;left:0;top:0; bottom:0; border-right:1px solid #e5e5e5; background-color:#f5f5f5; overflow:auto;float:left;"
				 >
				<ul id="treeDemo" class="ztree"></ul>
			</div>
		</div>
		
		<div style="float:left;">
			<!--白框内容-->
			<div class="page-container" >
				
				<!--单个-->
				<div id="single" style="display:none;">
					<div class="div_1"></div>
				</div>
				<!--2个-->
				<div id="double" style="display:none;">
					<div class="div_2"></div>
					<div class="div_2"></div>
				</div>
				<!--4个-->
				<div id="fouth" style="display:none;" > 
					 <div>
				       	<div class="div_4"></div>
						<div class="div_4"></div>
					</div>
				    <div>
				        <div class="div_4"></div>
						<div class="div_4"></div>
				    </div>
				</div>
				<!--9个-->
				<div id="nine" style="display:none;">
					<div>
				       	<div class="div_9"></div>
				      	<div class="div_9"></div>
						<div class="div_9"></div>
					</div>
				    <div>
				        <div class="div_9"></div>
				      	<div class="div_9"></div>
						<div class="div_9"></div>
					</div>
				    <div>
				        <div class="div_9"></div>
				      	<div class="div_9"></div>
						<div class="div_9"></div>
				    </div>
				</div>
				
				<!--单个-->
				<!--<div id="single" style="display:none;">
					<div id="divPlugin" class="plugin"></div>
				</div>-->
				<!--2个，多个-->
				<!--onload="iframeLoaded();"-->
				<!--<div id="double" align="center" style="display:none;"> 
				    <div>
				        <iframe class="iframe_2" src="iframe.html" frameborder="0" ></iframe>
				        <iframe class="iframe_2" src="iframe.html" frameborder="0" ></iframe>
				        
				    </div>
				</div>-->
				
				<!--4个，多个-->
				<!--<div id="fouth" align="center" style="display:none;"> 
					 <div>
				        <iframe src="iframe.html" frameborder="0" ></iframe>
				        <iframe src="iframe.html" frameborder="0" ></iframe>
				    <div>
				        <iframe src="iframe.html" frameborder="0" ></iframe>
				        <iframe src="iframe.html" frameborder="0" ></iframe>
				    </div>
				</div>
				-->
				
				<!--9个，多个-->
				<!--<div id="nine">
					
					<div>
				        <iframe class="iframe_9" src="iframe.html" frameborder="0" ></iframe>
				        <iframe class="iframe_9" src="iframe.html" frameborder="0" ></iframe>
				        <iframe class="iframe_9" src="iframe.html" frameborder="0" ></iframe>
				    </div>
				    <div>
				        <iframe class="iframe_9" src="iframe.html" frameborder="0" ></iframe>
				        <iframe class="iframe_9" src="iframe.html" frameborder="0" ></iframe>
				        <iframe class="iframe_9" src="iframe.html" frameborder="0" ></iframe>
				    </div>
				    <div>
				        <iframe class="iframe_9" src="iframe.html" frameborder="0" ></iframe>
				        <iframe class="iframe_9" src="iframe.html" frameborder="0" ></iframe>
				        <iframe class="iframe_9" src="iframe.html" frameborder="0" ></iframe>
				    </div>
				</div>-->
				
			</div>
		
		
			
		</div>
		


		<div style="float:left;">


		</div>

		<script type="text/javascript" src="../../js/importCommonJsCss_AfterPage.js"></script>
		<script type="text/javascript" src="../../lib/zTree/v3/js/jquery.ztree.all-3.5.min.js"></script>
		<script type="text/javascript" src="../../lib/laypage/1.2/laypage.js"></script>
		
		<!--webvideo js代码-->
		<!--<script src="../../js/webvideo/webVideoCtrl.js"></script>
		<script src="../../js/webvideo/demo-easy.js"></script>-->
		
		<link rel="stylesheet" href="test.css" type="text/css">

		<script type="text/javascript">
			//zTree
			var setting = {
				view: {
					dblClickExpand: false,
					showLine: false,
					selectedMulti: true
				},
				check:{
					enable:true,
					chkboxType:{
						"Y":"s",
						"N":"s"
					}
				},
				/*async:{
					enable:true
				},*/
				data: {
					simpleData: {
						enable: true,
						idKey: "id",
						pIdKey: "pId",
						rootPId: ""
					}
				},
				
				callback: {
					beforeClick: function(treeId, treeNode) {
						var zTree = $.fn.zTree.getZTreeObj("treeDemo");
						if(treeNode.isParent) {
							zTree.expandNode(treeNode);
							return false;
						} else {
							return true;
						}
					},
					onCheck: zTreeOnCheck 
				}
			};

			var zNodes = [
				{ id: 1, pId: 0, name: "一级分类", open: true , nocheck: true},
				{ id: 11, pId: 1, name: "二级分类" ,nocheck: true},
				{ id: 111, pId: 11, name: "三级分类" , nocheck: false},
				{ id: 112, pId: 11, name: "三级分类" , nocheck: false},
				{ id: 113, pId: 11, name: "三级分类" , nocheck: false},
				{ id: 114, pId: 11, name: "三级分类" , nocheck: false},
				{ id: 115, pId: 11, name: "三级分类" , nocheck: false},
				{ id: 12, pId: 1, name: "二级分类 1-2" ,nocheck: true},
				{ id: 121, pId: 12, name: "三级分类 1-2-1" , nocheck: false},
				{ id: 122, pId: 12, name: "三级分类 1-2-2" , nocheck: false},
				{ id: 121, pId: 12, name: "三级分类 1-2-1" , nocheck: false},
				{ id: 122, pId: 12, name: "三级分类 1-2-2" , nocheck: false},
				{ id: 121, pId: 12, name: "三级分类 1-2-1" , nocheck: false},
				{ id: 122, pId: 12, name: "三级分类 1-2-2" , nocheck: false},
			];
			
			//初始化ztree
			function init_zTree() {
				var t = $("#treeDemo");
				t = $.fn.zTree.init(t, setting, zNodes); 
				// expandAll(true);展开所有
			}
			//复选框点击回调事件
			function zTreeOnCheck(event, treeId, treeNode) {  
		        var checked = treeNode.checked; 
		        
//		        alert(treeNode.name);//获取到点击的复选框对象
//		        console.log((treeNode?treeNode.name:"root") + "checked " +(checked?"true":"false"));  
		        node_check();
		    };  
			
			
			
			//复选框监听
			document.node_check = function(){
				
				var ztreeNodes_test = window.parent.cameraTreeManager.getCheckedNodes();
				
				//var zTree = $.fn.zTree.getZTreeObj("treeDemo");//换成实际的图层的id  
				//var changedNodes = zTree.getChangeCheckedNodes(); //获取改变的全部结点
				//console.log(changedNodes.length);
				switch (/*changedNodes.length*/ztreeNodes_test.length){
					//需要填满每一个选项，不然多选回退时，会不执行
					case 0:
						reset();
						break;
					case 1:
						reset();
						document.getElementById('single').style.display='block';//show的display属性设置为none（隐藏）
						break;
					case 2:
						reset();
						document.getElementById('double').style.display='block';
						break;
					case 3:
						reset();
						document.getElementById('fouth').style.display='block';
					case 4:
						reset();
						document.getElementById('fouth').style.display='block';
						break;
					case 5:
						reset();
						document.getElementById('nine').style.display='block';
					case 6:
						reset();
						document.getElementById('nine').style.display='block';
					case 7:
						reset();
						document.getElementById('nine').style.display='block';
					case 8:
						reset();
						document.getElementById('nine').style.display='block';
					case 9:
						reset();
						document.getElementById('nine').style.display='block';
						break;
					default:
						reset();
						alert("您选的太多，最多同时选择9个！");
						break;
				}
				
				/*if(changedNodes.length==1){
					reset();
					document.getElementById('single').style.display='block';//show的display属性设置为none（隐藏）
				}
				else if(changedNodes.length==2){
						reset();
						document.getElementById('double').style.display='block';
					}
					else if(changedNodes.length<4){
						reset();
							document.getElementById('fouth').style.display='block';
						}
						else if(changedNodes.length<=9){
							reset();
								document.getElementById('nine').style.display='block';
							}
							else{ 
								reset();
								alert("您选的太多，最多同时选择9个！");
							}*/
			}
			function reset(){
				document.getElementById('single').style.display='none';
				document.getElementById('double').style.display='none';
				document.getElementById('fouth').style.display='none';
				document.getElementById('nine').style.display='none';
			}
			$(document).ready(init_zTree());
		</script>
	</body>

</html>